<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<%--<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">--%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-table.css">
<link href="bootstrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script type="text/javascript" src="bootstrap/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap-table.js"></script>
<script type="text/javascript" src="bootstrap/js/bootbox.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap-table-zh-CN.js"></script>
<script src="bootstrap/js/moment-with-locales.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function() {
		//获取所有的资产一览
		$("#table").bootstrapTable({   
		    url:'prdServlet?flag=init',//请求
			toolbar:"#tb",//工具栏
			toolbarAlign:"left",//工具栏的位置
			pagination : true,//显示分页
			sidePagination:"client",//使用客户端分页
			pageSize : 5,//默认每页显示的条数
			pageList : [ 5, 10, 15, 20 ],//选择每页的条数
		    columns:[
		  		{checkbox : true},//显示复选框
		        {field:'id',title:'资产内部编号',width:100,visible:false},    
		        {field:'asId',title:'资产编号',width:100},    
		        {field:'asSpec',title:'型号',width:100},    
		        {field:'asState',title:'状态',width:100,formatter: function(value,row,index){
						if (value=='1'){
							return '待用';
						} else if(value==2) {
							return '申请中';
						} else if(value==3) {
							return '在用';
						}else if(value==4) {
							return '报废';
						}
					}
				},    
		        {field:'asDate',title:'购买日期',width:100},    
		        {field:'asDefect',title:'保修期',width:100},    
		        {field:'rate',title:'折旧率',width:100,formatter: function(value,row,index){
					return value+"%";
				}},    
		        {field:'userName',title:'使用者',width:100}  
		    ]
		});
		$('#asDateStart').datetimepicker({
			//设置日期格式
	        format: 'YYYY-MM-DD',
			//设置区域字符集
	        locale: moment.locale('zh-cn')

	    });
		$('#asDateEnd').datetimepicker({
			//设置日期格式
	        format: 'YYYY-MM-DD',
			//设置区域字符集
	        locale: moment.locale('zh-cn')

	    });
		/* 插入用购买日期 */
		$('#asDateAdd').datetimepicker({
			//设置日期格式
	        format: 'YYYY-MM-DD',
			//设置区域字符集
	        locale: moment.locale('zh-cn')

	    });
		/* 用户用购买日期 */
		$('#asDateEdit').datetimepicker({
			//设置日期格式
	        format: 'YYYY-MM-DD',
			//设置区域字符集
	        locale: moment.locale('zh-cn')
	    });

		//给查询按钮注册单击事件
		$("#srch").click(function() {
			search();
		});
		//点击保存按钮  保存员工
		$("#add").click(function(){
			//保存资产
			openSavePrdModel();
		})
				//验证资产编号的唯一性
		$("input[name=asId]").blur(function() {
			//获取录入的资产编号
			var asId=$("#add_as_id").val();
			//判断资产编号不为空的情况下
			if(asId){
				//发送请求
				$.post("prdServlet?flag=chkAsId",{'asId':asId},function(data){
					//判断data不为空的情况下
					if(data){
						//json字符串->对象
						var obj=eval("("+data+")");
						if (obj.result==1) {
							$("#sp1").html("已存在");
							$("#sp1").css("color","red");
						} else if(obj.result==0) {
							$("#sp1").html("不存在");
							$("#sp1").css("color","green");
						}
					}
				});
			}
		});
		//点击保存按钮  
		$("#saveBtn").click(function(){
			//执行表单验证
			//资产编号验证
			var as_id= $('#add_as_id').val();
			//判断
			if(!as_id){
				bootbox.alert("资产编号不能为空!");
				return;
			}
			//定义资产编号的正则
			var reg = new RegExp(/^(host_|display_)[0-9]{3}$/);
			//验证资产编号是否符合规范
			if(!reg.test(as_id)){
				bootbox.alert("不是有效的资产编号!");
				return;
			}
			//验证型号
			//获取型号
			var asSpec=$("input[name=asSpec]").val();
			//判断
			if(!asSpec){
				bootbox.alert("型号不能为空!");
				return;
			}
			//获取购买日期
			var asDate=$("input[name=asDate]").val();
			//验证购买日期
			if(!asDate){
				bootbox.alert("购买日期不能为空!");
				return;
			}
			//获取保修期
			var asDefect=$("input[name=asDefect]").val();
			if(!asDefect){
				bootbox.alert("保修期不能为空!");
				return;
			}
			//保存资产信息
			savePrdInfo();
		})
		//判断是不是管理员,如果不是管理员就隐藏"折旧率"这一列
		if('${user.account}'!='admin'){
			$('#table').bootstrapTable('hideColumn','rate');
		}
		//删除按钮注册单击事件
		$("#remove").click(function(){
			del();
		})
		//给修改按钮注册一个单击事件
		$('#edit').click(function() {
			openEditEmpModel();
		});
		//点击修改按钮,注册单击事件
		$("#editBtn").click(function(){
			//获取编号
			var id= $("#form-edit input[name=id]").val();
			//判断资产编号不能为空
			if(!id){
				bootbox.alert("资产内部编号不能为空!");
				return;
			}
			//验证型号
			//获取资产型号
			var asSpec=$("#form-edit input[name=asSpec]").val();
			//判断
			if(!asSpec){
				bootbox.alert("型号不能为空!");
				return;
			}
			//获取购买日期
			var asDate=$("#form-edit input[name=asDate]").val()
			//验证购买日期
			if(!asDate){
				bootbox.alert("购买日期不能为空!");
				return;
			}
			//获取保修期
			var asDefect=$("#form-edit input[name=asDefect]").val();
			if(!asDefect){
				bootbox.alert("保修期不能为空!");
				return;
			}
			//根据资产内部编号,修改资产信息
			modifyEmpInfo();
		})
		//给申请按钮注册一个单击事件
		$('#apply').click(function() {
			apply();
		});
		//给归还按钮注册一个单击事件
		$('#back').click(function() {
			back();
		});
	})
	//给查询按钮注册单击事件
	function search() {
         var options = $('#table').bootstrapTable('refresh', {
            query: 
            {
				asId: $.trim($("input[name=asIdSrch]").val()),//资产编号
				asSpec: $.trim($("input[name=asSpecSrch]").val()),//型号
				asState: $("select[name=asStateSrch] option:selected").val(),//状态
				asDateStart: $.trim($("input[name=asDate_startSrch]").val()),//开始购买日期
				asDateEnd: $.trim($("input[name=asDate_endSrch]").val()),//结束购买日期
				asDefect: $.trim($("input[name=asDefectSrch]").val())//保修期
            }
        }); 
	}
	//打开资产添加对话框,初始化组件
	function openSavePrdModel() {
			$("#myModalLabelAdd").text("添加资产")//修改模态的标题
			//清空sp1的内容
			$('#sp1').html('');
			$('#myModalAdd').modal('show');//显示模态框
	}
	//重置插入表单
	function addPrdFormReset(){
		$("input[name=asId]").val('');
		$("input[name=asSpec]").val('');
		$("input[name=asDate]").val('');
		$("input[name=asDefect]").val('');
	}
	//保存资产信息
	function savePrdInfo() {
		//获取sp1的值
		var existsTxt=$("#sp1").html();
		//判断
		if(existsTxt=='已存在'){
			return;
		}
		//获取资产编号
		var asId = $("input[name=asId]").val();
		//获取型号
		var asSpec=$("input[name=asSpec]").val();
		//获取购买日期
		var asDate=$("input[name=asDate]").val();
		//获取保修期
		var asDefect=$("input[name=asDefect]").val();

		//将数据封装到json对象里
		var jsonData ={
				asId:asId,
				asSpec:asSpec,
				asDate:asDate,
				asDefect:asDefect
		}
		//ajax请求
		$.ajax({
			url:"prdServlet?flag=prdAdd",
			data:jsonData,
			type:"post",
			success:function(data){
		        //data(json)->jquery对象
		        var obj= eval("("+data+")");
		        //判断
		        if (obj.result==1) {
					bootbox.alert("插入成功!")
					//员工添加模态框隐藏
					$('#myModalAdd').modal('hide')
					//表格刷新
					search();
					//清空表单
		    	   /* 重置表单 */
					addPrdFormReset();
				} else if(obj.result==0) {
					bootbox.alert("插入失败!")
				}
			}
		})
	}
	//故障
	function del(){
		//获取被选中的行
		var assets = $("#table").bootstrapTable("getSelections");
		//存储资产内部编号
		var ids= new Array();
		//如果没有选中的话,弹出对话框
		if(assets.length==0){
			bootbox.alert("请选中产生故障的资产")
		}else{
			//遍历asIdArr
			for (var int = 0; int < assets.length; int++) {
				//找到本行的id,压入asIdArr
				ids.push(assets[int].id);
			}
			//弹出确认消息框
			bootbox.confirm("该资产产生故障了吗?", function(result){
				//单击ok按钮的情况下,才发送请求
				if(result){
				       //发送请求
				       $.post('prdServlet?flag=batchDel',{'ids[]':ids},function(data){
				    	   //判断data不为空个情况下
				    	   if (data) {
								//json字符串->json对象
								var obj= eval("("+data+")");
								//判断
								if (obj.result==1) {
						        	bootbox.alert("已标识为故障!")
									//表格刷新
									search();
								}
							}
				       });
				}
			})	
		}
	}
	//打开修改对话框,
	function openEditEmpModel() {
		//返回选中的记录
		var assets = $("#table").bootstrapTable("getSelections");
		//如果没有选中的话,弹出对话框
		if(assets.length==0){
			bootbox.alert("请选中要修改的部门");
		}else if(assets.length>1){
			//取消选中的行
			$("#table").bootstrapTable("uncheckAll");
			bootbox.alert("只能修改一个资产");
		}else {
			//显示模态框
			$("#myModalLabel").text("修改资产")//修改模态的标题
			var asset = assets[0];
			$("#form-edit input[name=id]").val(asset.id);//初始化编号
			$("#form-edit input[name=asId]").val(asset.asId);//初始化资产编号
			$("#form-edit input[name=asSpec]").val(asset.asSpec)//初始化型号
			$("#form-edit input[name=asDate]").val(asset.asDate)//初始化购买日期
			$("#form-edit input[name=asDefect]").val(asset.asDefect)//初始化保修期
			$('#myModalEdit').modal('show');
		}
	}
	function modifyEmpInfo(){
		//获取编号
		var id= $("#form-edit input[name=id]").val();
		//获取资产编号
		var asId = $("#form-edit input[name=asId]").val();
		//获取资产型号
		var asSpec=$("#form-edit input[name=asSpec]").val();
		//获取购买日期
		var asDate=$("#form-edit input[name=asDate]").val();
		//获取保修期
		var asDefect=$("#form-edit input[name=asDefect]").val();
		//将数据封装到json对象里
		var jsonData ={
				id:id,
				asId:asId,
				asSpec:asSpec,
				asDate:asDate,
				asDefect:asDefect
		}
		//ajax请求
		$.ajax({
			url:"prdServlet?flag=edit",
			data:jsonData,
			type:"post",
			success:function(data){
		        //data(json)->jquery对象
		        var obj= eval("("+data+")");
		        //判断
		        if (obj.result==1) {
					bootbox.alert("修改成功!")
					//资产修改模态框隐藏
					$('#myModalEdit').modal('hide')
					//表格刷新
					search();
				} else if(obj.result==0) {
					bootbox.alert("修改失败!")
				}
			}
		})
	}
	//申请
	function apply() {
		//获取选中行所对应的对象
		var assets=$('#table').bootstrapTable('getSelections');
		//存储要申请的资产编号数组
		var asIds=[];
		//没有选中
		if(assets.length==0){
			bootbox.alert("请选中要申请的资产");
		}else{
			//是否有不可申请的资产的标志位
			var flg=false;//没有
			//遍历assets
			for (var int = 0; int < assets.length; int++) {
				//获取当前状态
				if(assets[int].asState!=1){
					//设置标志位
					flg=true;
				}
				//将当前的资产编号压入asIds
				asIds.push(assets[int].asId);
			}
			//判断
			if(flg){
				bootbox.alert("只有待用的资产才方可申请!");
				return;
			}
			//发送资产申请请求
			$.post("appServlet?flag=app",{'asIds[]':asIds},function(data){
				//判断data不为空的情况下
				if(data){
					//将json字符串->json对象
					var obj=eval("("+data+")");
					//判断
					if(obj.result==1){
						bootbox.alert("资产已申请,等待管理员审批!!")
						//表格刷新
						search();
					}
				}
			});
		}
	}
	//归还
	function back() {
		//获取选中行所对应的对象
		var assets=$('#table').bootstrapTable('getSelections');
		//存储要归还的资产编号数组
		var asIds=[];
		//没有选中
		if(assets.length==0){
			bootbox.alert("请选中要归还的资产!")
			return;
		}else{
			//是否有不可归还的资产的标志位
			var flg=false;//没有
			//遍历assets
			for (var int = 0; int < assets.length; int++) {
				//获取当前状态
				if(!assets[int].asState==3||assets[int].account!='${user.account}'){
					//设置标志位
					flg=true;
				}
				//将当前的资产编号压入asIds
				asIds.push(assets[int].asId);
			}
			//判断
			if(flg){
				bootbox.alert("只有在用的并且是自己的机器才可以归还!")
				return;
			}
			//发送资产申请请求
			$.post("appServlet?flag=bk",{'asIds[]':asIds},function(data){
				//判断data不为空的情况下
				if(data){
					//将json字符串->json对象
					var obj=eval("("+data+")");
					//判断
					if(obj.result==1){
						bootbox.alert("资产已归还,等待管理员审批!")
						//表格刷新
						search();
					}
				}
			});
		}
	}
</script>
</head>
<body>
	<h2>资产查询</h2>
	<!-- 
		1:资产编号
		2:型号
		3:状态
		4:购买日期范围
		5:保修期
	 -->
	 <!-- 查询区域 -->
	  <div class="form-inline">
			<label for="asIdSrch">资产编号:</label>
		    <input type="text" class="form-control" id="asIdSrch" name="asIdSrch" placeholder="资产编号">
			<label for="asSpecSrch">资产型号:</label>
		    <input type="text" class="form-control" id="asSpecSrch" name="asSpecSrch" placeholder="资产型号">
		    <label for="asStateSrch">资产状态</label>
	  		<select class="form-control" id="asStateSrch" name="asStateSrch" >
					<option value="">-----请选择状态----</option>
			 		<option value="1">待用</option>
			 		<option value="2">申请中</option>
			 		<option value="3">在用</option>
		     </select><br>
			<label>购买范围:</label>
	         <!--指定 date标记-->
	         <div class='input-group date' id="asDateStart">
	             <input type='text' class="form-control" name="asDate_startSrch" />
	             <span class="input-group-addon">
	                 <span class="glyphicon glyphicon-calendar"></span>
	             </span>
	         </div>~
	         <div class='input-group date' id="asDateEnd">
	             <input type='text' class="form-control" name="asDate_endSrch" />
	             <span class="input-group-addon">
	                 <span class="glyphicon glyphicon-calendar"></span>
	             </span>
	         </div>
			<label for="asDefectSrch">保 修 期:</label>
		    <input type="text" class="form-control" id="asDefectSrch" name="asDefectSrch" placeholder="保 修 期">
			<input class="btn btn-default glyphicon glyphicon-search" type="button" value="查询" id="srch">
		  	<div id="tb">
				<button class="btn btn-default" id="add">
					<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
					增加
				</button>
				<button class="btn btn-default" id="remove">
					<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
					故障
				</button>
				<button class="btn btn-default" id="edit">
					<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
					修改
				</button>
				<button class="btn btn-default" id="apply">
					<span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span>
					申请
				</button>
				<button class="btn btn-default" id="back">
					<span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
					归还
				</button>
			</div>		  
	</div>
	<table id="table">
	</table>
	<!-- 添加对话框 -->
	<div class="modal fade" id="myModalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabelAdd">资产添加</h4>
	      </div>
	      <div class="modal-body">
	        <form id="form-add" method="post">   
			   	<div class="form-group">
				    <label for="asId">资产编号</label>
				    <input type="text" class="form-control" name="asId" placeholder="资产编号" id="add_as_id"><span id="sp1"></span>
				</div>
			   	<div class="form-group">
				    <label for="asSpec">型号</label>
				    <input type="text" class="form-control" name="asSpec" placeholder="型号">
				</div>
			   	<div class="form-group">
 					<label for="asDate">购买日期</label>
		            <!--指定 date标记-->
		            <div class='input-group date' id='asDateAdd'>
		                <input type='text' class="form-control" name="asDate"/>
		                <span class="input-group-addon">
		                    <span class="glyphicon glyphicon-calendar"></span>
		                </span>
		            </div>
				</div>
			   	<div class="form-group">
				    <label for="asDefect">保修期</label>
				    <input type="text" class="form-control" name="asDefect" placeholder="保修期">
				</div>
			</form>
	      </div>
	      <div class="modal-footer">
	      	<button type="reset" id="resetBtn" class="btn btn-default"><span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>重置</button>
	        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	        <button type="button" class="btn btn-primary" id="saveBtn">保存</button>
	      </div>
	    </div>
	  </div>
	</div>
	<!-- 修改对话框 -->
	<div class="modal fade" id="myModalEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabeEdit">资产修改</h4>
	      </div>
	      <div class="modal-body">
	        <form id="form-edit" method="post">   
			   	<div class="form-group">
				    <label for="asId">资产编号</label>
				    <input type="hidden" name="id">
				    <input type="text" class="form-control" name="asId" placeholder="姓名" readonly="readonly">
				</div>
			   	<div class="form-group">
				    <label for="asSpec">型号</label>
				    <input type="text" class="form-control" name="asSpec" placeholder="型号">
				</div>
			   	<div class="form-group">
 					<label for="asDate">购买日期</label>
		            <!--指定 date标记-->
		            <div class='input-group date' id='asDateEdit'>
		                <input type='text' class="form-control" name="asDate"/>
		                <span class="input-group-addon">
		                    <span class="glyphicon glyphicon-calendar"></span>
		                </span>
		            </div>
				</div>
			   	<div class="form-group">
				    <label for="asDefect">保修期</label>
				    <input type="text" class="form-control" name="asDefect" placeholder="保修期">
				</div>
			</form>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	        <button type="button" class="btn btn-primary" id="editBtn">保存</button>
	      </div>
	    </div>
	  </div>
	</div>
</body>
</html>